<template>
  <div>
      <!-- @click-left="$router.back()" -->
    <van-nav-bar
      title="个人编辑资料"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push({path:'/'})"
    >
    <template #right>
      <van-icon name="wap-home-o" size="6vw"/>
    </template>
    </van-nav-bar>
    <!-- 2.0头像 -->
    <div class="avatat">
      <div class="avatat_ima">
        <van-uploader :after-read="afterRead" >
        <van-image
          round
          fit="cover"
          width="100%"
          height="90%"
          :src="userinfo.head_img"
        >
        </van-image>
        </van-uploader>
      </div>
    </div>
    <!-- 3.0编辑组件 -->
      <MyCell 
        title="昵称" 
        :value="userinfo.nickname"
        @click=" nicknameshow = true; nicknameTemp= userinfo.nickname "
      ></MyCell>
      <MyCell 
        title="密码" 
        value="******"
        @click="passwordshow = true; passwordNew = '', passwordOld = '' "
      ></MyCell>
      <MyCell
        @click="gendershow = true"
        title="性别" 
        :value="userinfo.gender ? '男' : '女' " 
      ></MyCell>
      <!-- 4.0 显示模态框 -->
    <van-dialog 
      v-model="nicknameshow" 
      title="修改昵称" 
      @confirm="nicknameFn"
      show-cancel-button
    >
    <van-field 
      required
      v-model="nicknameTemp" 
      label="文本" 
      placeholder="请输入用户名" 
    />
    </van-dialog>
    <!-- 5.0密码模态框 -->
    <van-dialog 
      v-model="passwordshow" 
      title="修改密码" 
      show-cancel-button
      :before-close="beforeClose"
    >
    <van-field 
      required
      v-model="passwordOld" 
      label="原密码" 
      :type=" show ? 'text': 'password'"
      placeholder="请输入旧密码" 
      :right-icon=" showimg ? 'closed-eye' : 'eye-o'"
      @click="typae"
    />
      <!-- v-show="right-icon='eye-o'" -->
    <van-field 
      required
      v-model="passwordNew" 
      label="新密码" 
      :type=" showw ? 'text': 'password'"
      :right-icon=" showicon ? 'closed-eye' : 'eye-o'"
      placeholder="请输入新密码"
      @click="typaea" 
    />
    </van-dialog>
    <!-- 6.0 修改性别 -->
    <van-action-sheet
      v-model="gendershow"
      :actions="[{name:'男', gender: 1},{name:'女',gender: 0}]"
      cancel-text="取消"
      close-on-click-action
      @select="genderFn"
    />
  </div>
</template>

<script>
import MyCell from '../components/Mycell.vue'
import {userDetaiAPI,userUpdataByIdAPI} from '../apis/user'
import request from '../utils/myaxios' 
import {uploadFileAPI} from '../apis/index'
export default {
  data () {
    return {
      userinfo:{}, 
      // 昵称 
      nicknameshow:false,
      nicknameTemp:"",
      // 密码
      passwordshow:false,
      // 旧密码
      passwordOld:"",
      // 新密码
      passwordNew:"",
      // 性别
      gendershow:false,
      // 是否显示密码
      show:false,
      showw:false,
      showimg:true,
      showicon:true,
    }
  },
  components:{
    MyCell
  },
   async created (){ 
    //   const res = await userDetaiAPI(this.$route.query.id)
    //     console.log(res);
    const id = this.$route.query.id;
    // const id = this.$route.query.id;
    // 根据 id 获取用户信息
    if(!id) return this.$toast.fail('用户没有id');
    const res = await userDetaiAPI(id);
    console.log(res);
    res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img
    this.userinfo = res.data.data;
  },
  methods: {
    typae() {
       this.show =!this.show;
       this.showimg =!this.showimg;
    },
    typaea() {
      this.showw =!this.showw;
      this.showicon =!this.showicon;
    },
   async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      const fd = new FormData();
      fd.append('file',file.file);
      const res = await uploadFileAPI(fd);
        console.log(res);
      // 判断文件上传是否成功
      if(res.data.message === '文件上传成功') {
        // 获取图片地址
        const imgUrl = res.data.data.url;
        // 把新的图片地址，更新到用户图片里面
        const res2 = await userUpdataByIdAPI(this.$route.query.id,{
          head_img:imgUrl,

        });
        this.userinfo.head_img = request.defaults.baseURL + res2.data.data.head_img;
        // console.log(res2); 
        this.$toast.success('用户头像更新成功');
      }
    },
    // 更新用户
    async nicknameFn() {
      console.log('33333');
      // 获取输入框的用户昵称
      if(this.nicknameTemp === '') return this.$notify('请输入昵称，不能为空')
      // 发送请求更新用户昵称
      const res = await userUpdataByIdAPI(this.$route.query.id,{
        nickname:this.nicknameTemp,
      });
      console.log(res);
      // 昵称更新到页面
      this.userinfo.nickname = res.data.data.nickname;
      this.$toast.success('修改成功')
     },
      //  修改用户密码
    async beforeClose(action,done){
      if(action === 'confirm') {
        // console.log(action,done);
        // 用户输入的原密码是否正确
        if (
          this.passwordOld === this.userinfo.password && /^[a-zA-Z0-9~!@#$%^&*_+=-]{3,18}$/.test(this.passwordNew)
        ) {
          console.log('原密码输入正确');
          const res = await userUpdataByIdAPI(this.$route.query.id,{
          password:this.passwordNew,
          });
          console.log(res);
          if(res.data.message === '修改成功') {
            this.userinfo.password = this.passwordNew;
            this.$toast.success('密码修改成功')
          }
          // 主动关闭弹窗
          done();
        } else {
        // 阻止取消弹窗消失
        done(false)
        this.$toast.fail('原密码输入错误或者密码不符合法')
        }
      } else {
        // 关闭弹窗
         done()
      }
    },
    // 修改性别
    async genderFn(item) {
      console.log('你点击了',item);
       const res = await userUpdataByIdAPI(this.$route.query.id,{
        gender:item.gender,
      });
      if(res.data.message === '修改成功'){
        this.$toast.success('性别更新成功')
        this.userinfo.gender = res.data.data.gender;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.avatat{
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  .avatat_ima{
    width: 100px;
    height: 100px;
  }
}
// .van-uploader{
//   position: absolute;
//   opacity: 0;
// }
</style>